
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Basic Sliders</title>

<style type="text/css">
/*margin and padding on body element
  can introduce errors in determining
  element position and are not recommended;
  we turn them off as a foundation for YUI
  CSS treatments. */
body {
	margin:0;
	padding:0;
}
</style>

<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>


<!--begin custom header content for this example-->
<style type="text/css">
    #demo input {
        width: 2em;
    }
    .horiz_slider {
        margin-left: 1ex;
    }
    .vert_slider {
        margin-bottom: 1em;
    }
</style>

<!--end custom header content for this example-->

</head>

<body class="yui3-skin-sam  yui-skin-sam">

<h1>Basic Sliders</h1>

<div class="exampleIntro">
	<p>This example walks you through the basics of creating a Slider from script.
Both Sliders in this example link to text input fields that expect numeric input.  The first Slider uses the default configuration, spanning values between 0 and 100, and is rendered inline.</p>

<p>The second Slider is configured to orient vertically (along the y axis) and the configuration includes minimum, maximium, and initial values.  It is rendered into a <code>&lt;div&gt;</code>.</p>

<p>The first Slider is set up in a more traditional JavaScript coding style and
the second using the shorter, method chaining style.</p>
			
</div>

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<div id="demo">

    <h4>Horizontal Slider</h4>
    <p>
        <label for="horiz_value">Value: </label>
            <input id="horiz_value" value="0">
        <span class="horiz_slider"></span>
    </p>

    <h4>Vertical Slider</h4>
    <p><label for="vert_value">Value: </label><input id="vert_value" value="30"></p>
    <div class="vert_slider"></div>

</div>
<script type="text/javascript">
// Create a YUI instance and request the slider module and its dependencies
YUI().use("slider", function (Y) {

var xInput,  // input tied to xSlider
    yInput,  // input tied to ySlider
    xSlider; // horizontal Slider

// Function to pass input value back to the Slider
function updateSlider( e ) {
    var data   = this.getData(),
        slider = data.slider,
        value  = parseInt( this.get( "value" ), 10 );

    if ( data.wait ) {
        data.wait.cancel();
    }

    // Update the Slider on a delay to allow time for typing
    data.wait = Y.later( 200, slider, function () {
        data.wait = null;
        this.set( "value", value );
    } );
}

// Function to update the input value from the Slider value
function updateInput( e ) {
    this.set( "value", e.newVal );
}
    


// Create a horizontal Slider using all defaults
xSlider = new Y.Slider();

// Link the input value to the Slider
xInput = Y.one( "#horiz_value" );
xInput.setData( { slider: xSlider } );

// Pass the input as the 'this' object inside updateInput
xSlider.after( "valueChange", updateInput, xInput );
xInput.on( "keyup", updateSlider );
    
// Render the Slider next to the input
xSlider.render('.horiz_slider')

    
// Create the vertical Slider.
yInput = Y.one( "#vert_value" );
yInput.setData( "slider", new Y.Slider({
            axis: 'y',
            min   : 100,      // min is the value at the top
            max   : -100,     // max is the value at the bottom
            value : 30,       // initial value
            length: '201px',  // rail extended to afford all values

            // construction-time event subscription
            after : {
                valueChange: Y.bind( updateInput, yInput )
            }
        }).render( ".vert_slider" ) // render returns the Slider
    )                               // set( "data", ... ) returns the Node
    .on( "keyup", updateSlider );   // chain the keyup subscription

});
</script>

<!--END SOURCE CODE FOR EXAMPLE =============================== -->

</body>
</html>
